<template>
  <div class="navigation-bar">
    <div class="nav-contain">
      <div class="nav-cats">
        <!-- navigate -->
        <div class="category-btn" @mouseover="isShowList = true" @mouseout="isShowList = false">
          <div class="line-icon"><i></i><i></i><i></i></div>
          <span>全部分类</span>
        </div>
        <!-- category -->
        <ul class="category-list" v-if="constant || isShowList" @mouseover="isShowList = true" @mouseout="isShowList = false">
          <li class="category-item" v-for="(category, index) in categoryList" :key="index" @mouseover="setCurrent(index)">
            <span class="category-name" @click="queryGoodsByCate(category)">{{category.categoryName}}</span>
            <div class="category-example">
              <span
                class="link"
                v-if="category.categoryAttribute[0] && index1 < 3"
                v-for="(exmp, index1) in category.categoryAttribute[0].sonAttribute"
                :key="index1"
                @click="queryGoodsByAttr(category.categoryAttribute[0].sonAttribute[index1])">
                {{exmp.value}}
              </span>
            </div>
            <!-- attribute -->
            <div class="category-layout" v-if="currentCategory.categoryId">
              <!-- 分类属性 -->
              <div class="attribute-wrapper">
                <div class="attribute-list" v-if="attr.sonAttribute.length" v-for="(attr, index) in currentCategory.categoryAttribute" :key="index">
                  <h4 class="attribute-tit">{{attr.parentAttribute.value}}</h4>
                  <ul class="link-list row">
                    <li v-for="(attr1, index1) in attr.sonAttribute" :key="index1">
                      <span class="link-item" target="_blank" @click="queryGoodsByAttr(attr1)">{{attr1.value}}</span>
                    </li>
                  </ul>
                </div>
              </div>
              <!-- 热门品牌 -->
              <div class="brand-wrapper">
                <ul class="brand-list">
                  <li class="brand-item" v-for="(brand, index2) in currentCategory.categoryBrands" :key="index2" v-if="index2 < 6">
                    <span target="_blank"><img :src="brand.brandImg" width="66" height="66" @click="queryGoodsByBrand(brand)"></span>
                  </li>
                </ul>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <ul class="nav-list">
        <li class="nav-item">
          <router-link class="link" to="/brands"><i class="icon icon-teabrand"></i>品牌馆</router-link>
        </li>
        <li class="nav-item">
          <el-dropdown @command="checkTeaData" placement="bottom">
            <span class="link">
              <i class="icon icon-teadata"></i> 茶叶数据
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="analysisData">中老期茶数据</el-dropdown-item>
              <el-dropdown-item command="jdTeaData">京东平台数据</el-dropdown-item>
              <el-dropdown-item command="chawoTeaData">零售平台数据</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  data () {
    return {
      isShowList: false, // 是否显示分类列表
      currentCategory: {}
    }
  },
  computed: {
    ...mapState({
      'constant': state => state.constant,
      'categoryList': state => state.categoryList
    })
  },
  mounted () {
    this.getCategory()
  },
  methods: {
    ...mapActions([
      'getCategory'
    ]),
    // 设置当前查看分类菜单
    setCurrent (index) {
      if (index || index === 0) {
        this.currentCategory = this.categoryList[index]
      } else {
        return false
      }
    },
    // 点击分类跳转到商品列表页
    queryGoodsByCate (cate) {
      let param = {
        cateId: cate.categoryId,
        cateName: cate.categoryName
      }
      this.isShowList = false
      let time = Date.parse(new Date())
      this.$store.commit('setGoodsParams', param)
      this.$router.push('/goods/goodsList?time=' + time)
    },
    // 点击品类跳转到商品列表页
    queryGoodsByAttr (Attr) {
      let param = {
        cateId: Attr.categoryId,
        attrs: [
          {
            pAttrId: Attr.parentAttrId,
            sonAttr: {
              attrId: Attr.attributeId,
              attrName: Attr.value
            }
          }
        ]
      }
      this.isShowList = false
      let time = Date.parse(new Date())
      this.$store.commit('setGoodsParams', param)
      this.$router.push('/goods/goodsList?time=' + time)
    },
    // 点击品牌跳转到商品列表页
    queryGoodsByBrand (brand) {
      let param = {
        cateId: brand.categoryId,
        brands: [
          {
            brandId: brand.brandId,
            brandName: brand.brandName
          }
        ]
      }
      this.isShowList = false
      let time = Date.parse(new Date())
      this.$store.commit('setGoodsParams', param)
      this.$router.push('/goods/goodsList?time=' + time)
    },
    // 查看茶叶数据
    checkTeaData (command) {
      this.$router.push('/' + command)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/scss/basic.scss';
.navigation-bar {
  border-bottom: solid 3px $green_l;
  .nav-contain {
    position: relative;
    margin: 0 auto;
    width: 1200px;
    height: 36px;
    line-height: 36px;
    .nav-cats {
      float: left;
      width: 250px;
      height: 36px;
      font-size: $fz_16;
      text-align: center;
      color: #ffffff;
      background: url(../../assets/images/cate-btn-bg.png);
      background-size: 100% 100%;
      cursor: pointer;
      box-shadow: 0 1px 6px rgba(128, 128, 128, 0.3);
      overflow: visible;
      .category-btn {
        width: 250px;
        height: 36px;
        line-height: 39px;
        text-align: center;
        font-size: 0;
        .line-icon {
          display: inline-block;
          vertical-align: top;
          margin: 12px 15px 0 0;
          width: 20px;
          height: 14px;
          overflow: hidden;
          i {
            position: relative;
            display: block;
            float: right;
            margin-bottom: 3px;
            width: 14px;
            height: 2px;
            background: #ffffff;
            border-radius: 2px;
            &::before {
              content: '';
              position: absolute;
              top: 0;
              left: -4px;
              width: 2px;
              height: 2px;
              background: #ffffff;
              border-radius: 2px;
            }
          }
        }
        span {
          vertical-align: top;
          font-weight: 300;
          font-size: $fz_16;
        }
      }
      .category-list {
        display: flex;
        flex-direction: column;
        position: relative;
        z-index: 101;
        height: 463px;
        background: rgba(0, 0, 0, .6);
        border-top: solid 3px $green_l;
        box-shadow: 0 1px 6px rgba(128, 128, 128, 0.3);
        .category-item {
          padding: 0 10px;
          flex: 1;
          font-size: 0;
          text-align: left;
          &:hover {
            background: $bg_light;
            .category-name,
            .category-example .link {
              color: #333;
            }
            .category-layout {
              display: block;
            }
          }
          .category-name {
            margin-right: 10px;
            display: inline-block;
            vertical-align: text-top;
            width: 45px;
            height: 14px;
            line-height: 14px;
            text-align: justify;
            font-weight: 500;
            font-size: $fz_14;
            color: #fff;
            overflow: hidden;
            &::after {
              content: '';
              display: inline-block;
              width: 100%;
              height: 0;
            }
            &:hover {
              color: $red;
            }
          }
          .category-example {
            display: inline-block;
            vertical-align: text-top;
            max-width: 175px;
            height: 14px;
            line-height: 14px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            .link {
              position: relative;
              margin-right: 12px;
              font-size: $fz_12;
              font-weight: 300;
              color: #fff;
              &::after {
                content: '/';
                position: absolute;
                top: 50%;
                right: -6px;
                line-height: 1;
                transform: translate(50%, -50%);
              }
              &:last-child {
                margin-right: 0;
                &::after {
                  display: none;
                }
              }
              &:hover {
                color: $red;
              }
            }
          }
          .category-layout {
            display: none;
            position: absolute;
            top: 0;
            left: 250px;
            z-index: 102;
            width: 950px;
            height: 460px;
            background: #ffffff;
            border-right: solid 1px $border_color;
            box-shadow: 0 1px 6px rgba(128, 128, 128, 0.3);
            .attribute-wrapper {
              margin-right: 120px;
              padding: 20px 25px;
              .attribute-list {
                margin-bottom: 15px;
                color: $f_main;
                text-align: left;
                line-height: 1;
                .attribute-tit {
                  margin-bottom: 8px;
                  padding: 7px 0;
                  font-size: $fz_14;
                  border-bottom: solid 1px $border_color;
                }
                .link-list {
                  font-size: $fz_12;
                  text-align: left;
                  & > li {
                    position: relative;
                    display: inline-block;
                    padding: 0 12px;
                    &::after {
                      content: '';
                      position: absolute;
                      top: 50%;
                      right: 0;
                      transform: translate3d(0, -50%, 0);
                      width: 1px;
                      height: 10px;
                      background: $border_color;
                    }
                    &:last-child::after,
                    &:nth-child(12n)::after{
                      display: none;
                    }
                  }
                  .link-item {
                    display: inline-block;
                    padding: 7px 0;
                    &:hover {
                      color: $green_d;
                      text-decoration: underline;
                    }
                  }
                }
              }
            }
            .brand-wrapper {
              position: absolute;
              top: 0;
              right: 0;
              width: 110px;
              height: 100%;
              background: $bg_light;
              border-left: solid 1px $border_color;
              .brand-list {
                padding: 9px 0 10px;
                .brand-item {
                  margin: 0 auto 9px;
                  width: 66px;
                  height: 66px;
                  overflow: hidden;
                  &:last-child {
                    margin-bottom: 0;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .nav-list {
    display: inline-block;
    vertical-align: top;
    width: 950px;
    overflow: hidden;
    .nav-item {
      float: left;
      padding: 0 50px;
      .link {
        display: block;
        height: 36px;
        line-height: 36px;
        font-weight: bold;
        font-size: $fz_16;
        color: $f_main;
        &:hover {
          color: $green;
          text-decoration: none;
          .icon-teabrand {
            background: url(../../assets/images/tea-brands_on.png)!important;
          }
          .icon-teadata {
            background: url(../../assets/images/icon_tea_pie_data_on.png)!important;
          }
        }
        .icon {
          display: inline-block;
          position: relative;
          top: 3px;
          margin-right: 5px;
          width: 18px;
          height: 18px;
          &.icon-teabrand {
            background: url(../../assets/images/tea-brands.png);
          }
          &.icon-teadata {
            background: url(../../assets/images/icon_tea_pie_data.png);
          }
        }
      }
    }
  }
}
</style>
